<template>
	<div class="reg">
		<!-- 版心90vw;vw宽度的权重,最宽100vw,vh高度的权重,最高100vh -->
		<div class="main">
			<div class="header">
				<img src="/pics/mylogo.png" alt="logo">
			</div>
			<!--图片与表单-->
			<div class="content">
				<!-- 背景图 -->
				<div>
				</div>
				<!-- 表单 -->
				<div>
					<!-- 用户注册 -->
					<div>
						<h4>用户注册</h4>
						<h5 v-text='msg'></h5>
						<div class="username">
							<input type="text" required placeholder="请输入用户名" v-model="username">
						</div>
						<div class="password">
							<input type="password" required placeholder="请输入密码" v-model="password">
						</div>
						<div class="repass">
							<input type="password" required placeholder="请再输入密码" v-model="repass">
						</div>

						<div class="contact_number">
							<input type="text" required placeholder="请输入联系方式" v-model="contact_number">
						</div>
						<div class="address">
							<input type="text" required placeholder="请输入家庭地址" v-model="address">
						</div>
						<div class="account_info">
							<input type="text" required placeholder="请输入邮箱地址" v-model="account_info">
						</div>
						<!-- 注册按钮 -->
						<div class="myreg">
							<input type="button" value="注册" @click="reg">
						</div>
						<div class="back">
							<!-- 直接跳到登录 -->
							<a href="/login">返回登录</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // Use only what you need
	import axios from 'axios';
	import qs from 'qs';

	const router = useRouter();
	const username = ref(null);
	const password = ref(null);
	const repass = ref(null);
	const contact_number = ref(null);
	const address = ref(null);
	const account_info = ref(null);
	const msg = ref(null);

	const reg = () => {
		let us = username.value;
		let pa = password.value;
		let cn = contact_number.value; // contact_number字段
		let addr = address.value
		let ai = account_info.value
		let ad = address.value; // 示例地址字段

		if (pa !== repass.value) {
			msg.value = "两次输入的密码不一致";
			return;
		}

		// 确保contact_number不为空
		if (!cn) {
			msg.value = "联系号码不能为空";
			return;
		}
		if (!addr) {
			msg.value = "家庭地址不能为空";
			return;
		}
		if (!ai) {
			msg.value = "邮箱不能为空";
			return;
		}

		let user = {
			username: us,
			password: pa,
			contact_number: cn, // 使用contact_number字段
			address: ad,
			account_info: ai,

			// 添加其他必要字段
		};

		axios.post("user/register", user, {
				headers: {
					'Content-Type': 'application/json'
				}
			})
			.then((res) => {
				msg.value = res.data.message;

				setTimeout(() => {
					// 清空表单
					username.value = '';
					password.value = '';
					contact_number.value = '';
					address.value = '';
					account_info.value = '';

					// 重定向到登录页面
					router.push('/login');
				}, 2000);
			})
			.catch((er) => {
				console.error(er);
				msg.value = "注册失败，请重试";
			});
	};
</script>


<!--注册页样式设置-->
<style scoped>
	/*vw：屏宽的100等份的1个单位,1vw  */
	/*vh：屏高的100等份的1个单位,1vh  */
	.reg {
		width: 100vw;
		height: 100vh;
		background-color: #00A9F0;
	}

	.reg>.main {
		height: 90vh;
		padding-top: 3vh;
		/* 将盒子转换为边框盒子 */
		box-sizing: border-box;
	}

	.reg>.main>.header>img {
		width: 2vw;
	}

	/*主要内容*/
	/* 弹性盒子的应用flex */
	.reg .main .content {
		/* background-color: grey; */
		height: 80vh;
		/* 将此元素转换为弹性盒子，子元素自动转换为行内块元素，以便它的子元素按比例分配 */
		display: flex;
		/* 给子元素设置排更的方向，默认为按行排row */
		flex-direction: row;
	}

	/* 子元素设置样式 */
	.reg .main .content>div:nth-of-type(1) {
		/* outline: 1px solid red; */
		/* 设置背景图 */
		background: url('/pics/background_img.png')no-repeat;
		/* 背景图大小100% 100%; */
		background-size: cover;
		/* 位置 */
		background-position: center;
		/* 设置比例 */
		flex: 3;
	}

	/* 右边表单 */
	.reg .main .content>div:nth-of-type(2) {
		/* outline: 2px solid yellow; */
		/* 设置比例 */
		flex: 2;
	}

	/* 表单内容 */
	.reg .main .content>div:nth-of-type(2)>div {
		background-color: white;
		width: 20vw;
		height: 62vh;
		/* 孙子元素水平居中 */
		margin: 0 auto;
		margin-top: 5vh;
		padding-top: 6vh;
		box-sizing: border-box;
		border-radius: 0.6vw;
	}

	/* 注册标题 */
	.reg .main .content>div:nth-of-type(2)>div>h4 {
		color: #00A9F0;
		text-align: center;
		/* 文字的间距 */
		letter-spacing: 1vw;
		padding-left: 1vw;
		/* background-color: wheat; */
	}

	.reg .main .content>div:nth-of-type(2)>div>h5 {
		height: 3vh;
		line-height: 3vh;
		font-size: 1vw;
		text-align: center;
		color: coral;
		/* background-color: pink; */
	}

	.reg .main .content>div:nth-of-type(2)>div>.username>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	.reg .main .content>div:nth-of-type(2)>div>.password>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	/* 重填密码 */
	.reg .main .content>div:nth-of-type(2)>div>.repass>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	.reg .main .content>div:nth-of-type(2)>div>.contact_number>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	.reg .main .content>div:nth-of-type(2)>div>.address>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	.reg .main .content>div:nth-of-type(2)>div>.account_info>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	/* 注册按钮 */
	.reg .main .content>div:nth-of-type(2)>div>.myreg>input {
		width: 16vw;
		height: 5vh;
		margin-left: 2vw;
		margin-top: 2vh;
		/* 自定义按钮 */
		border: none;
		outline: medium;
		background-color: #00A9F0;
		color: white;
		font-size: 1vw;
	}

	/* 返回登录 */
	.reg .main .content>div:nth-of-type(2)>div>.back {
		width: 16vw;
		height: 4vh;
		line-height: 4vh;
		padding-left: 2vw;
	}
</style>